<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      #div1 {
        width: 198px;
        height: 66px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      }
    </style>
  </head>
  <body>
    <h1>拖拽</h1>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img
      class="drag1"
      src="./asserts/img1.png"
      alt=""
      draggable="true"
      ondragstart="drag(event)"
      width="100px"
      height="50px"
    />
    <script>
      function allowDrop(ev) {
        ev.preventDefault();
      }
      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.className);
      }
      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementsByClassName(data)[0]);
      }
    </script>
  </body>
</html>
